<template>
    <app-layout title="联保" btnType="unset">
        <view class="background">
            <image class="image" :src="background" mode="widthFix" />
        </view>
        <view class="common-form-container">
            <view class="input-item">
                <view class="title-box">
                    <text>品牌</text>
                </view>
                <view class="input-box">
                    <input class="input" v-model="brand" placeholder="请输入贵公司品牌" placeholder-class="placeholder-style-3" />
                </view>
            </view>
            <view class="input-item">
                <view class="title-box">
                    <text>产品类型</text>
                </view>
                <view class="input-box">
                    <input
                        class="input"
                        v-model="projectType"
                        placeholder="请输入产品类型"
                        placeholder-class="placeholder-style-3"
                    />
                </view>
            </view>
            <view class="input-item">
                <view class="title-box">
                    <text>联系人</text>
                </view>
                <view class="input-box">
                    <input class="input" v-model="name" placeholder="请输入姓名" placeholder-class="placeholder-style-3" />
                </view>
            </view>
            <view class="input-item">
                <view class="title-box">
                    <text>联系手机</text>
                </view>
                <view class="input-box">
                    <input
                        class="input"
                        v-model="mobile"
                        placeholder="请输入联系手机号"
                        placeholder-class="placeholder-style-3"
                    />
                </view>
            </view>
            <view class="textarea-item">
                <view class="title-box">
                    <text>售后说明</text>
                </view>
                <view class="textarea-box">
                    <textarea
                        v-model="content"
                        class="textarea"
                        placeholder="请输入售后说明"
                        placeholder-class="placeholder-style-3"
                    />
                </view>
            </view>
        </view>
        <view class="common-save-form-btn">
            <view class="btn" @click="submit">提交</view>
        </view>
    </app-layout>
</template>

<script>
import AppLayout from "@/components/layout/layout";
import { mapGetters } from "vuex";
export default {
    name: "service-other-after-market",
    data() {
        return {
            background: require("@/static/temp/single/3.png"),
            brand: "",
            projectType: "",
            name: "",
            mobile: "",
            content: "",
        };
    },
    components: {
        AppLayout,
    },
    computed: {
        ...mapGetters({
            isLogin: "user/isLogin",
        }),
    },
    onLoad() {},
    onShow() {
        if (!this.isLogin) {
            this.$store.commit("user/showLoginModal", true);
        }
    },
    onReady() {},
    onReachBottom() {},
    onPullDownRefresh() {},
    onShareTimeline() {},
    onShareAppMessage() {},
    methods: {
        submit() {
            this.$models.service
                .afterMarketApply({
                    brand: this.brand,
                    goods: this.projectType,
                    name: this.name,
                    mobile: this.mobile,
                    desc: this.content,
                })
                .then((msg) => {
                    this.$utils.toast(msg).then(() => {
                        this.$utils.toPage("/pages/order/order", {}, "switch");
                    });
                })
                .catch((e) => {
                    this.$utils.toast(e);
                });
        },
    },
};
</script>

<style lang="less" scoped>
.background {
    z-index: 5;
    width: 100%;
    line-height: 0;
    .image {
        width: 100%;
    }
}
.common-form-container {
    z-index: 10;
    position: relative;
    margin-top: -85rpx;
    .title-box {
        font-weight: normal;
    }
}
</style>